<template>
	<onez-view class="box-room" :style="roomStyle" v-if="ready">
		<onez-view class="bottom">
			<!-- <onez-view class="score">
				<onez-view>底分</onez-view>
				<onez-view class="value">{{ info.credit_base }}</onez-view>
			</onez-view> -->
			<onez-view class="cards">
				<onez-view class="ul">
					<onez-view class="li" v-for="(card, index) in bottomCards">
						<onez-view class="onez-card"
							:style="'background-image:url(' + (showBottomCards ? card.image : cardBack) + ')'"></onez-view>
					</onez-view>
				</onez-view>
			</onez-view>
			<!-- <onez-view class="score">
				<onez-view>倍数</onez-view>
				<onez-view class="value">{{ beishu }}</onez-view>
			</onez-view> -->
		</onez-view>
		<onez-view class="box-middle">
			<onez-view class="box-left">
				<onez-view class="player" v-if="playerLeft != -1 && player[playerLeft]">
					<ddz-user :info="player[playerLeft]" pos="left" :has="player[playerLeft].has"
						:ref="'player' + playerLeft"></ddz-user>
				</onez-view>
			</onez-view>
			<onez-view class="box-right">
				<onez-view class="player" v-if="playerLeft != -1 && player[playerRight]">
					<ddz-user :info="player[playerRight]" pos="right" :has="player[playerRight].has"
						:ref="'player' + playerRight"></ddz-user>
				</onez-view>
			</onez-view>
		</onez-view>
		<onez-view class="me-box" v-if="playerMe != -1 && player[playerMe]">
			<ddz-user :info="player[playerMe]" :card-bg="cardBack" :cards="mycards" pos="me" :ref="'player' + playerMe">
				<template v-slot:time_left>
					<onez-button v-if="status == '等叫地主'" class="btn" type="info" round
						:width="150" :height="60"
						@click="doit('不叫')">不叫</onez-button>
					<onez-button v-else-if="status == '是否抢地主'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('不抢')">不抢</onez-button>
					<onez-button v-else-if="status == '是否加倍'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('不加倍')">不加倍</onez-button>
					<onez-button v-else-if="status == '等出牌'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('要不起')">要不起</onez-button>
				</template>
				<template v-slot:time_right>
					<onez-button v-if="status == '等叫地主'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('叫地主')">叫地主</onez-button>
					<onez-button v-else-if="status == '是否抢地主'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('抢地主')">抢地主</onez-button>
					<onez-button v-else-if="status == '是否加倍'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('加倍')">加倍</onez-button>
					<onez-button v-else-if="status == '等出牌'" class="btn" type="info" round
					:width="150" :height="60"
						@click="doit('手动出牌')">出牌</onez-button>
				</template>
			</ddz-user>
		</onez-view>
	</onez-view>
	<onez-view v-else class="start-btn">
		<onez-button class="btn" type="info" round :width="300" :height="85"
			@click="startGame">开始游戏</onez-button>
	</onez-view>
</template>

<script>
	import ddzUser from './ddz-user.vue'
	import onezView from '../../components/onez-view/onez-view.vue'
	import onezButton from '../../components/onez-button/onez-button.vue'
	export default {
		name: 'onez-room',
		components: {
			ddzUser,
			onezView,
			onezButton
		},
		data() {
			return {
				status: 'ready',
				ready: false,
				cardBack: null,
				info: null,
				roomStyle: null,
				beishu: 1,
				player: [null, null, null],
				playerLeft: -1,
				playerRight: -1,
				playerMe: -1,
				showCards: [],
				bottomCards: [],
				showBottomCards: [],
				mycards: []
			};
		},
		props: {
			stage: {
				type: Object,
				default: null
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			async startGame() {
				console.log('startGame === ')
				this.play();
			},
			async init() {
				this.info = this.stage.scene;
				this.cardBack = await this.$game.hook(this, 'static', {
					file: '/images/cards/card_00.png'
				});
				this.$game.onResize(this.resize);
				// this.play();
			},
			async resize() {
				let width = this.$game.width;
				let height = this.$game.height;
				let zoom = Math.max(480 / width, 480 / height);
				zoom = Math.max(1, zoom);
				let ui_width = width * zoom;
				let ui_height = height * zoom;
				zoom = 1 / zoom;
				this.roomStyle = 'width:' + ui_width + 'px;height:' + ui_height + 'px;transform:scale3d(' + zoom +
					',' + zoom + ',' + zoom + ')';
			},
			async play() {
				//初始化
				this.dz = -1;
				this.last = -1;
				//分配角色
				this.playerLeft = 0;
				this.playerRight = 2;
				this.playerMe = 1;
				this.curCards = null;

				this.player[this.playerLeft] = {
					userid: '牛二',
					showCard: true
				};
				this.player[this.playerRight] = {
					userid: '狗胜',
					showCard: true
				};
				this.player[this.playerMe] = {
					userid: 'me',
					showCard: true
				};
				this.ready = true;
				//发牌
				let cards = await this.$game.hook(this, 'allCards', {});
				let offset = 0;
				for (let i = 0; i < 3; i++) {
					let cards_ = cards.slice(offset, offset + 17);
					let player = this.player[i];
					player.index = i;
					player.has = 17;
					player.cards_ = cards_;
					player.cards = i == this.playerMe ? cards_ : [];
					this.player[i] = player;
					offset += 17;
				}
				this.bottomCards = cards.slice(51, 54);
				this.showBottomCards = false;
				this.$game.wait(this); //刷新
				let r, sec;
				//叫地主
				this.status = '等叫地主';
				sec = 15;
				for (var i = 0; i < 3; i++) {
					this.$refs['player' + i].update({
						type: 'time',
						sec: sec
					});
				}
				//等玩家操作
				r = await this.$game.waitReturn(sec, curSec => {
					if (this.dz != -1) {
						return true;
					}
					//电脑自动叫地主
					for (var i = 0; i < 3; i++) {
						if (i != this.playerMe) {
							if (curSec > 5) {
								if (Math.random() > 0.5) {
									this.doit('叫地主', i);
									return true;
								}
							}
						}
					}
				});
				if (!r) {
					//超时，重新开始
					this.play();
					return;
				}
				//正式开始游戏
				//当前出牌为地主
				this.current = this.dz;
				for (var i = 0; i < 3; i++) {
					this.$refs['player' + i].update();
				}
				this.start();
			},
			//正式开始游戏
			async start() {
				console.log('player ==> ', this.current, this.player[this.current].cards_.length);
				let sec = 20;
				this.$refs['player' + this.current].update({
					type: 'time',
					sec: sec
				});
				this.status = '';
				if (this.current == this.playerMe) {
					this.status = '等出牌';
					this.waitMe = true;
					let r = await this.$game.waitReturn(sec, async curSec => !this.waitMe);
					console.log('playerMe自动==>', r, this.playerMe, this.current,  this.current == this.playerMe)
					if (!r) {
						//自动出牌
						await this.doit('自动出牌', this.current);
					}
				} else {
					//自动出牌
					await this.$game.delay(2);
					await this.doit('自动出牌', this.current);
				}
				//胜利
				if (this.player[this.current].cards_.length < 1) {
					if (this.player[this.current].role == 'dizhu') {
						if (this.current == this.playerMe) {
							this.$game.hook(this, 'playSound', {
								type: '胜利'
							});
						} else {
							this.$game.hook(this, 'playSound', {
								type: '失败'
							});
						}
						let res = await this.$game.alert('地主胜利');
						console.log('res =>', res)
						this.$game.restart()
					} else {
						if (this.player[this.current].role != 'dizhi') {
							this.$game.hook(this, 'playSound', {
								type: '胜利'
							});
						} else {
							this.$game.hook(this, 'playSound', {
								type: '失败'
							});
						}
						let res = await this.$game.alert('农民胜利');
						console.log('res =>', res)
						this.$game.restart()
					}
					// this.play();
					return;
				}

				//下一位
				this.current++;
				if (this.current > 2) {
					this.current = 0;
				}
				this.start();
			},
			async doit(name, playerIndex) {
				if (typeof playerIndex == 'undefined') {
					playerIndex = this.playerMe;
				}
				console.log(playerIndex, name);
				if (name == '叫地主') {
					this.status = '游戏中';
					this.dz = playerIndex;
					for (let i = 0; i < 3; i++) {
						if (i == this.dz) {
							this.player[i].role = 'dizhu';
						} else {
							this.player[i].role = 'farmer';
						}
					}
					this.$refs['player' + playerIndex].update({
						type: 'tip',
						tip: '叫地主'
					});
					this.$game.hook(this, 'playSound', {
						type: '叫地主'
					});
				} else if (name == '不叫') {
					this.$game.hook(this, 'playSound', {
						type: '不叫'
					});
				} else if (name == '要不起') {
					this.waitMe = false;
					this.$refs['player' + playerIndex].update({
						type: 'tip',
						tip: '要不起'
					});
					this.$game.hook(this, 'playSound', {
						type: '要不起'
					});
				} else if (name == '手动出牌') {
					let outCards = this.$refs['player' + playerIndex].myCards;
					if (outCards.length > 0) {
						let tp = await this.$game.hook(this, 'getCardsType', {
							cards: outCards
						});
						console.log('牌型==>', tp)
						if (!tp) {
							uni.showToast({
								title: '无效牌型!',
								icon:'none'
							})
							return
						}
						if (this.last != playerIndex) {
							let can = await this.$game.hook(this, 'canChupai', {
								cards: outCards,
								curCards: this.curCards
							});
							if (can == 1) {
								uni.showToast({
									icon: 'none',
									title: '牌面小于桌面上的牌'
								})
								return;
							} else if (can == 2) {
								uni.showToast({
									icon: 'none',
									title: '牌型不同'
								})
								return;
							}
						}

						let remainCards = await this.$game.hook(this, 'remainCards', {
							myCards: this.player[playerIndex].cards_,
							outCards: outCards
						});
						this.$refs['player' + playerIndex].update({
							type: 'cards',
							cards: outCards
						});
						this.player[playerIndex].cards_ = remainCards;
						if (playerIndex == this.playerMe) {
							this.player[playerIndex].cards = remainCards;
						}
						this.player[playerIndex].has = remainCards.length;
						this.curCards = outCards;
						this.last = playerIndex;
						this.waitMe = false;
						this.$game.hook(this, 'playSound', {
							cards: outCards
						});
						if (this.player[playerIndex].has == 1) {
							await this.$game.delay(1);
							this.$game.hook(this, 'playSound', {
								type: '一张牌'
							});
						} else if (this.player[playerIndex].has == 2) {
							await this.$game.delay(1);
							this.$game.hook(this, 'playSound', {
								type: '两张牌'
							});
						}
					}
				} else if (name == '自动出牌') {
					this.waitMe = false;
					let outCards = await this.$game.hook(this, 'autoPlay', {
						myCards: this.player[playerIndex].cards_,
						curCards: this.last == playerIndex ? null : this.curCards
					});

					if (outCards) {
						outCards = await this.$game.hook(this, 'toKeys', {
							cards: outCards
						});
						let remainCards = await this.$game.hook(this, 'remainCards', {
							myCards: this.player[playerIndex].cards_,
							outCards: outCards
						});
						this.$refs['player' + playerIndex].update({
							type: 'cards',
							cards: outCards
						});
						this.player[playerIndex].cards_ = remainCards;
						if (playerIndex == this.playerMe) {
							this.player[playerIndex].cards = remainCards;
						}
						this.player[playerIndex].has = remainCards.length;
						this.curCards = outCards;
						this.last = playerIndex;
						this.$game.hook(this, 'playSound', {
							cards: outCards
						});
						if (this.player[playerIndex].has == 1) {
							await this.$game.delay(1);
							this.$game.hook(this, 'playSound', {
								type: '一张牌'
							});
						} else if (this.player[playerIndex].has == 2) {
							await this.$game.delay(1);
							this.$game.hook(this, 'playSound', {
								type: '两张牌'
							});
						}
					} else {
						this.$refs['player' + playerIndex].update({
							type: 'tip',
							tip: '要不起'
						});
						this.$game.hook(this, 'playSound', {
							type: '要不起'
						});
					}
				}
			}
		}
	};
</script>

<style scoped>
	
	.start-btn {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}
	
	.cards {
		text-align: center;
		margin: 0 auto;
		position: relative;
		white-space: nowrap;
		transform-origin: 50% 50%;
		display: inline-block;
	}

	.cards .ul {
		position: relative;
		top: -50px;
	}

	.cards .ul:first-child {
		top: 0;
	}

	.cards .li {
		display: inline-block;
		width: 25px;
	}

	.onez-card {
		position: relative;
		display: inline-block;
		width: 71px;
		height: 96px;
		background-size: auto 100%;
		background-position: 0 0;
		-webkit-transition: all 0.4s ease-in-out;
		-moz-transition: all 0.4s ease-in-out;
		-o-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
	}

	.bottom {
		width: 200px;
		height: 60px;
		margin: 0 auto;
		white-space: nowrap;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 10px;
		color: #fff;
		padding: 2px;
		text-align: center;
		display: block;
		pointer-events: all;
		position: relative;
		top: 15px;
		margin-bottom: 20px;
	}

	.bottom .onez-view {
		display: inline-block;
		text-align: center;
	}

	.bottom .score {
		margin: 5px;
	}

	.bottom .value {
		display: block;
	}

	.bottom .cards {
		left: 0;
		width: 105px;
	}

	.bottom .cards .li {
		width: auto;
	}

	.bottom .cards .li .onez-card {
		width: 35px;
		height: 48px;
	}

	.onez-card.selected {
		position: relative;
		top: -25px;
	}

	.box-left,
	.box-right {
		width: 45vw;
	}

	.box-left .box-h {
		height: 80px;
	}

	.box-right .box-h {
		float: right;
		clear: both;
		width: auto;
		height: 80px;
	}

	.box-right .clock {
		float: right;
		clear: both;
	}

	.myinfo {
		height: 60px;
	}

	.onez-tip {
		text-align: center;
		font-size: 20px;
		color: #fff4c0;
		text-shadow: #d2973c 1px 0 0, #d2973c 0 1px 0, #d2973c -1px 0 0, #d2973c 0 -1px 0;
	}

	.onez-scene {
		height: 100% !important;
	}

	.show .onez-cards {
		margin-top: -50px;
	}

	.show .clock {
		position: relative;
		top: -12px;
	}

	.box-room {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		transform-origin: 0 0;
	}

	.me-box {
		position: absolute;
		z-index: 1009;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
	}

	.me-box,
	.me-box .onez-card {
		pointer-events: all !important;
	}

	.box-middle {
		position: relative;
		display: block;
	}

	.box-left {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}

	.box-right {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
	}

	.show .button {
		display: inline-block;
		color: #fff;
		position: relative;
		top: 30px;
	}
</style>